<template>
  <div v-loading='loading'>
    <el-popover ref="ruleManager" placement="bottom" width="350" trigger="click">
        <el-table :data="ruleList" :show-header="false" size="mini">
            <el-table-column width="200" label="角色">
                <template slot-scope="scope">
                    <el-tooltip placement="top-start" effect="light">
                        <div slot="content">{{scope.row.description}}</div>
                        <span>{{scope.row.name}}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column width="150"  label="操作">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.builtIn" type="primary" plain size="mini" @click="toRuleEditer(scope.$index,scope.row)">编辑</el-button>
                    <el-button :disabled="scope.row.builtIn" type="danger" plain size="mini" @click="deleteRule(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-popover>

    <el-button type="primary" size="small" @click='toAdminEditer(-1,null)'>添加员工</el-button>
    <el-button type="primary" size="small" @click="toRuleEditer(-1,null)">创建角色</el-button>
    <el-button type="primary" size="small" v-popover:ruleManager>角色管理</el-button>
    <el-button type="primary" size="small">访客API</el-button>

    <adminEditer :adminEditerData="adminEditerData" @adminEdited='adminEdited'></adminEditer>
    <ruleEditer :ruleEditerData='ruleEditerData' @ruleEdited='ruleEdited'></ruleEditer>

    <el-table :data="tableData.adminList" :style="'margin-top:20px;min-height:'+(height-180)+'px;width:100%'" size="mini">
        <el-table-column type="selection" width="50" align="center" fixed="left"></el-table-column>
        <el-table-column label="工号" prop="jobNum" min-width="100" align="left"></el-table-column>
        <el-table-column label="姓名" prop="name" min-width="150" align="left"></el-table-column>
        <el-table-column label="角色" min-width="150" align="left">
            <template slot-scope="scope">
                <span>{{ruleMap[scope.row.ruleId]}}</span>
            </template>
        </el-table-column>
        <el-table-column label="性别" prop="sex" min-width="75" align="left"></el-table-column>
        <el-table-column label="手机" prop="mobile" min-width="125" align="left"></el-table-column>
        <!-- <el-table-column label="地址" prop="address" width="400" align="left"></el-table-column> -->
        <el-table-column label="状态" prop="locked" width="120" align="left">
            <template slot-scope="scope">
                <!-- <el-switch v-model="tableData.adminList[scope.$index].locked" :active-value="false" :inactive-value="true" @change="changLocked(scope.$index,scope.row)"></el-switch> -->
                <span v-if="scope.row.locked" style="color:red">冻结</span>
                <span v-else>正常</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="250" align="left">
            <template slot-scope="scope">
                <el-button @click="toAdminEditer(scope.$index,scope.row)" size='mini'>编辑</el-button>
                <el-button @click="resetPassword(scope.$index,scope.row)" size='mini'>密码重置</el-button>
                <el-button @click="adminUnlock(scope.$index,scope.row)" type='warning' size='mini' v-if="scope.row.locked">解冻</el-button>
                <el-button @click="adminLock(scope.$index,scope.row)" type='warning' size='mini' v-else>冻结</el-button>
                
                <!-- <el-button @click="deleteMerchant(scope.$index,scope.row)" type='danger' size='mini'>删除</el-button> -->
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        style="margin-top:10px"
        @current-change="getAdminList"
        :current-page.sync="tableData.currentPage"
        :page-size="20"
        layout="total, prev, pager, next"
        :total="tableData.adminCount">
    </el-pagination>
  </div>
</template>

<script>
import adminEditer from "@/components/admin/adminEditer"
import ruleEditer from "@/components/admin/ruleEditer"

export default {
  name: 'AdminManager',
  data(){
    return {
        loading:true,
        height:window.innerHeight,
        tableData:{
            currentPage:1,
            adminCount:0,
            adminList:[]
        },
        adminEditerData:{
            show:false,
            index:-1,
            ruleList:[],
            admin:{
                id:'',
                jobNum:'',
                name:'',
                ruleId:'',
                sex:'男',
                mobile:'',
                address:'',
                joinDate:''
            }
        },
        ruleEditerData:{
            show:false,
            index:-1,
            rule:{
                id:'',
                name:'',
                description:''
            }
        },
        ruleList:[],
        ruleMap:{}
    };
  },
  methods:{
    adminInit:function(){
        this.getRuleList();
        this.getAdminList(1);
    },
    getAdminList:function(val){
        this.loading=true;
        this.$http.post(this.$store.state.url+"/admin/list","currentPage="+val).then(
            response=>{
                if(response.data.status==200){
                    this.tableData=response.data.data;
                }else{
                    this.$message.error(response.data.message);
                }
                this.loading=false;
            }
        ).catch();
    },
    getRuleList:function(){
        this.$http.post(this.$store.state.url+"/rule/list").then(
            response=>{
                if(response.data.status==200){
                    this.ruleList=response.data.data;
                    var ruleMap={};
                    for(var i=0;i<this.ruleList.length;i++)ruleMap[this.ruleList[i].id]=this.ruleList[i].name;
                    this.ruleMap=ruleMap;
                }
            }
        ).catch();
    },
    toAdminEditer:function(index,row){
        this.adminEditerData.index=index;
        this.adminEditerData.ruleList=this.ruleList;
        if(row==null)this.adminEditerData.admin.id='';
        else this.adminEditerData.admin.id=row.id;
        this.adminEditerData.show=true;
    },
    adminEdited:function(admin){
        if(this.adminEditerData.index==-1){
            this.getAdminList(10241024);
        }else{
            var i=this.adminEditerData.index;
            for(var key in admin)this.tableData.adminList[i][key]=admin[key];
        }
        this.adminEditerData.show=false;
    },
    deleteRule:function(index,rule){
        //alert(index+'  '+rule.id);
        this.loading=true;
        this.$http.post(this.$store.state.url+"/rule/delete","id="+rule.id).then(
            response=>{
                if(response.data.status==200){
                    this.adminInit();
                }else{
                    this.$message.error(response.data.message);
                    this.loading=false;
                }
            }
        ).catch(error=>{});

    },
    toRuleEditer:function(index,rule){
        this.ruleEditerData.index=index;
        if(rule==null)this.ruleEditerData.rule.id='';
        else this.ruleEditerData.rule.id=rule.id;
        this.ruleEditerData.show=true;
    },
    ruleEdited:function(rule){
        var i=this.ruleEditerData.index;
        if(i==-1){
            this.ruleList.push(rule);
        }else{
            for(var key in rule)this.ruleList[i][key]=rule[key];
        }
        this.ruleMap[rule.id]=rule.name;
        this.ruleEditerData.show=false;
    },
    adminLock(index,row){
        this.$http.post(this.$store.state.url+"/admin/locked","id="+row.id).then(res=>{
            if(res.data.status==200){
                this.$message({type:'success',message:'用户已冻结'});
                this.getAdminList(this.tableData.currentPage);
            }else{
                this.$message({type:'error',message:res.data.message});
            }
        }).catch(error=>{});
    },
    adminUnlock(index,row){
        this.$http.post(this.$store.state.url+"/admin/unlock","id="+row.id).then(res=>{
            if(res.data.status==200){
                this.$message({type:'success',message:'冻结解除'});
                this.getAdminList(this.tableData.currentPage);
            }else{
                this.$message({type:'error',message:res.data.message});
            }
        }).catch(error=>{});
    },
    resetPassword(index,row){
        this.$confirm('将此工作人员密码初始化, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$http.post(this.$store.state.url+"/admin/resetpw","id="+row.id).then(res=>{
                if(res.data.status==200){
                    this.$message({type:'success',message:'密码已重置'});
                }else{
                    this.$message({type:'error',message:res.data.message});
                }
            }).catch(error=>{});
        }).catch(() => {
            this.$message.info('已取消操作');
        });
        
    }
  },
  created:function(){
      window.onresize=()=>{
        this.height=window.innerHeight;
      }
      this.adminInit();
  },
  components:{
      adminEditer:adminEditer,
      ruleEditer:ruleEditer
  }
}
</script>

<style scoped>

</style>
